#React Router
RSSフィードReact Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
All Posts
Q. React Routerでページ遷移してもErrorBoundaryがリセットされない
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
Q. Migrate to React Router v6 Q&A まとめ
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
React Router v6でパスパラメータが変更されたら再レンダリングしたい
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
React Router V6でOutletを利用したページコンテンツの遅延読み込み
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
News bits
Remix の新たな方向性について
Remix の新たな方向性について
Remix v3 に向けた新たな方向性を発表。React Router v7 への統合完了を受けて、Preact ベースの軽量フレームワークとして再構築される。React への依存から脱却し Preact をフォークして使用し、LLM 向けに最適化されたコードとドキュメント設計を採用する。
新しいアーキテクチャでは、ブラウザネイティブ API を基盤とした開発、外部依存を極力排除した自律的なエコシステムを構築する。単一目的で交換可能な抽象化を採用したモジュラー設計でありながら、最終的には単一パッケージとして配布される。Reach UI の復活も予定されている。
React Router v7 が Shopify、X.com、GitHub、ChatGPT などで採用され安定基盤となったことで、Remix は従来のパラダイムから解放され、より実験的で革新的な方向に進むことが可能になったと述べている。
React Router v7.2.0
React Router v7.2.0
React Router v7.2.0 がリリース。
https://reactrouter.com/changelog#v720
型安全なリンク
フレームワークモードで、型安全にパスを扱える href ユーティリティが追加された。 存在しないパスや誤ったパラメータを指定すると型エラーが発生する。
import { href } from "react-router";
const link = href("/blog/:slug", { slug: "my-first-post" }); React Router v7 リリース
React Router v7 リリース
React Router v7 リリース。 Remix の機能を統合し、React 18 と 19 の架け橋となるバージョン。
React Router v6 からのアップグレードガイドライン公開。
最新の v6 であれば、フラグを順次有効化することで段階的な移行が可能。
パス記述方法の変更、useTransition による状態更新、パッケージの react-router への統合などの変更。
Remix のメジャーアップデートでもあるため、Remix v2 からのアップグレードガイドラインも併せて公開。
出展：React Router v7,Upgrading from v6 | React Router,Upgrading from Remix | React Router
Merging Remix and React Router
Merging Remix and React Router
新しい Remix は React Router v7 としてリリースする予定のようです。
Remix は以前から React Router のフレームワークのようなものでしたが、Vite プラグイン対応や SPA モードにより、Remix と React Router の差分がほぼなくなったことが理由として言及されています。
実際、Remix の機能のほとんどは React Router で既に利用できます。インポート元を@remix-run/*からreact-routerに切り替えるだけで利用できるようにする予定とのことです。この変更によって React Router から Remix への段階的な移行がよりしやすくなると思われます。
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.